<!DOCTYPE html>
<html lang="zh">
<head>
    <th:block th:include="include :: header('表单校验')"/>
</head>
<body class="gray-bg">
<div class="wrapper animated fadeInRight">

    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <p>code：</p>
                            <input type="text" name="pcode" id="pcode"/>
                        </li>

                        <li>
                            <a type="submit" class="btn btn-rounded btn-primary  btn-sm" id="generateTest"><i
                                    class="fa fa-download"></i>&nbsp;验证条码或科室码</a>
                        </li>

                        <li></li>

                        <li>
                            <a type="submit" class="btn btn-rounded btn-primary  btn-sm" id="generateTestOne"><i
                                    class="fa fa-download"></i>&nbsp;生成测试</a>
                        </li>

                        <li>
                            <a type="submit" class="btn btn-rounded btn-primary  btn-sm" id="generate"><i
                                    class="fa fa-download"></i>&nbsp;生成下载</a>
                        </li>

                        <li>
                            <a class="btn btn-warning btn-rounded btn-sm"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>

                    </ul>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="container-div wrapper-content">
    <div class="row ibox-content">

        <div class="">
            <div class="col-sm-6">
                <form class="form-horizontal m-t" id="commentForm">
                    <div class="float-e-margins">
                        <div class="">

                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">医院名称：</label>
                            <div class="col-sm-8">
                                <input id="cname" name="hospital" minlength="2" type="text" class="form-control"
                                       placeholder="请输入文本">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">条码总数：</label>
                            <div class="col-sm-8">
                                <input id="cemail" type="number" class="form-control" name="codeno" required
                                       placeholder="请输入数字" value="2">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">单文件数量：</label>
                            <div class="col-sm-8">
                                <input id="curl" type="number" class="form-control" name="fileno" placeholder="请输入数字"
                                       value="2" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">批次：</label>
                            <div class="col-sm-8">
                                <input id="pici" type="number" class="form-control" name="batch" placeholder="请输入数字"
                                       value="009">
                            </div>
                        </div>


                        <!--<div class="form-group" style="display: none">-->
                        <!--<label class="col-sm-3 control-label">打包压缩：</label>-->

                        <!--<div class="col-sm-8">-->
                        <!--<div class="radio check-box">-->
                        <!--<label>-->
                        <!--<input type="radio" value="option1" name="a" checked=""> <i></i>压缩</label>-->
                        <!--</div>-->
                        <!--<div class="radio check-box">-->
                        <!--<label>-->
                        <!--<input type="radio" value="option2" name="a"> <i></i>不压缩</label>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</div>-->

                        <div class="form-group">
                            <label class="col-sm-3 control-label">生成文件：</label>
                            <div class="col-sm-8">
                                <label class="checkbox-inline check-box">
                                    <input type="checkbox" checked="" name="istext">txt文本</label>
                                <label class="checkbox-inline check-box">
                                    <input type="checkbox" name="isbrcode">条形码</label>
                                <label class="checkbox-inline check-box">
                                    <input type="checkbox" name="isqrcode">二维码</label>
                            </div>
                        </div>

                    </div>
                </form>

                <div class="">

                </div>
                <div class="form-group">

                </div>
                <!--<div class="ibox float-e-margins " disabled="disabled">-->
                <!--<div class="ibox-content">-->
                <!--<p class="m-t">更多示例请访问官方示例页面：<a href="http://jqueryvalidation.org/files/demo/"-->
                <!--target="_blank">查看</a>-->
                <!--</p>-->
                <!--<p>中文API可参考：<a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#jquery-validate"-->
                <!--target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#jquery-validate</a>-->
                <!--</p>-->
                <!--</div>-->
                <!--</div>-->


            </div>


            <div class="col-md-6">
                <!--二维码-->
                <div class="form-group">
                    <br>
                    <div class="fileinput fileinput-new">
                        <div class="fileinput-new thumbnail bw0-ns"
                             style="border-width: 0; text-align: center;" id="qrCode">
                            <!--<img id="qrCode" src="/img/profile.jpg" style="height: 100%">-->
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <br>
                    <div class="fileinput fileinput-new m-t-lg mt5-l">
                        <div class="fileinput-new thumbnail br-0"
                             style="border-width: 0; text-align: center;" id="brcode">
                            <!--<img style="height: 100%" class="br-0"  src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3205122725,1863770873&fm=26&gp=0.jpg">-->
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<script th:src="@{/js/jquery.qrcode.min.js}"></script>
<script th:src="@{/js/JsBarcode.all.min.js}"></script>
<script th:src="@{/js/jquery-form.js}"></script>
<script type="text/javascript">
    var prefix = ctx + "yf/tagmanager";

    $(function () {
        $("#generate").click(function () {
            if ($("#commentForm").valid())
                layer.prompt({title: '请输入生成口令', formType: 1}, function (pass, index) {
                    //获取数据，
                    $.post(prefix + "/barcode/generate/pass", {pass: pass}, function (res) {
                        console.log(res)
                        if (res.code == 0) {
                            layer.close(index);

                            $.modal.loading("条码生成中。。。");
                            $.post(ctx + res.data.downloadurl, $("#commentForm").serialize() + "&password=" + pass, function (res) {
                                console.log(res)
                                if (res.code == 0) {
                                    window.location.href = ctx + res.data.downloadurl;
                                    $.modal.closeLoading();
                                    $.modal.alertSuccess(res.msg);
                                } else {
                                    $.modal.closeLoading();
                                    $.modal.alertError(res.msg + ":" + res.data.msg);
                                }
                            });
                        } else {
                            $.modal.alertError(res.msg);
                        }
                    })
                });
        })
        var w = 200, h = 200, b = "#ffffff", f = "#000000";//二维码参数

        //生成条形码
        function bCodes(id, qid) {
            $(id).html(" <canvas></canvas>");
            JsBarcode(id + ">canvas", qid, {
                format: "CODE128",
                height: 150,
                width: 5,
                textAlign: "center",
                textPosition: "button",
                font: "serif",
                fontOptions: "bold",
                fontSize: 40,
                textMargin: 5,
                marginTop: 20,
                marginLeft: 20,
                marginRight: 20,
                marginBottom: 20
            });
        }

        //验证 条形码并生成
        $("#generateTest").click(function () {
            var code = $("#pcode").val();
            if (code.length == 18 || code.length == 22)
                $.operate.post(prefix + "/barcode/validation", {"pcode": code}, function (res) {
                    bCodes("#brcode", code);
                })
            else if (code.length == 12) {
                $("#qrCode").html("");
                $("#qrCode").qrcode({
                    render: "canvas",
                    text: code,
                    width: w,
                    height: h,
                    background: b,       //二维码的后景色
                    foreground: f,        //二维码的前景色
                    // src: 'img/gray.jpg'             //二维码中间的图片
                });
                $.modal.msgSuccess("二维码生成成功");
            } else {
                $.modal.msgError("请输入正确条码");
            }
        })

        //生成一个测试条码
        $("#generateTestOne").click(function () {
            layer.prompt({title: '请输入生成口令', formType: 1}, function (pass, index) {
                $.post(prefix + "/barcode/generate/pass", {pass: pass}, function (res) {
                    console.log(res)
                    if (res.code == 0) {
                        $.operate.post(prefix + "/barcode/i", {"batch": $("#pici").val()}, function (res) {
                            console.log(res)
                            if (res) {
                            }
                        })
                        layer.close(index);
                    }
                })
            })
        });
    });
</script>
</body>
</html>
